<template>
	<card-vue>
		<template #header>
			<div class="flex items-center justify-between">
				<card-title img="win" :size="20" iconColor="var(--color-primary)" textT="slotswins.win" />
				<div class="">
					<div @click="handleChangeTab" class="bg-bg-3 px-6 py-[9px] rounded-lg cursor-pointer">
						{{ $t(selectedTab.name) }}
					</div>
					<!-- <base-switch-tabs
						:modelValue="
							type === 'casino' ? casinoStore.currentRecomentedTab : slotStore.currentRecomentedTab
						"
						size="small"
						@update:modelValue="handleChangeTab"
						:data="tabList"
						translation
						activeTextBold /> -->
				</div>
			</div>
		</template>
		<template #content>
			<win-list :type="type" :tab="selectedTab.id" />
		</template>
	</card-vue>
</template>
<script lang="ts" setup>
import CardTitle from '@/components/slots/common/card-title.vue'
import CardVue from '@/components/slots/common/card.vue'
import WinList from './list.vue'
import { ref } from 'vue'

const tab = ref(0)

defineProps({
	type: {
		type: String,
		default: 'slots'
	}
})

const tabList = [
	{
		id: 1,
		name: 'slotswins.day',
		icon: ''
	},
	{
		id: 2,
		name: 'slotswins.week',
		icon: ''
	},
	{
		id: 3,
		name: 'slotswins.month',
		icon: ''
	}
]
const selectedTab = ref({
	id: 1,
	name: 'slotswins.day'
})

const handleChangeTab = () => {
	tab.value = tab.value + 1
	if (tab.value >= tabList.length) {
		tab.value = 0
	}
	selectedTab.value = tabList[tab.value]
	// if (props.type === 'casino') {
	// 	if (casinoStore.currentRecomentedTab !== val) {
	// 		casinoStore.currentRecomentedTab = val
	// 	}
	// } else {
	// 	if (slotStore.currentRecomentedTab !== val) {
	// 		slotStore.currentRecomentedTab = val
	// 	}
	// }
}
</script>
